<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 搜索添加区域 -->
			<el-row :gutter="15">
				<el-col :span="8">
					<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getGoodsList">
						<el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
					</el-input>
				</el-col>
				<el-col :span="5">
					<el-button type="primary" @click="goAddPage">添加商品</el-button>
				</el-col>
			</el-row>
			<!-- 商品列表区域 -->
			<el-table :data="goodsList" border stripe>
				<el-table-column type="index" label="#"></el-table-column>
				<el-table-column prop="goods_name" label="商品名称"></el-table-column>
				<el-table-column prop="goods_price" label="商品价格（元）"></el-table-column>
				<el-table-column prop="goods_weight" label="商品重量"></el-table-column>
				<el-table-column prop="add_time" label="创建时间">
					<!-- 注意后台获取的时间是秒，要转换为毫秒后再进行过滤转换格式 -->
					<template slot-scope="scope">{{scope.row.add_time * 1000 | dateFormat}}</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="editListClick(scope.row.goods_id)"></el-button>
						<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteList(scope.row.goods_id)"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页区域 -->
			 <el-pagination	@size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[5,10,15,20]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
		<!-- 编辑商品信息对话框 -->
		<el-dialog title="编辑商品信息" :visible.sync="editDialogVisible"  width="50%" @close="editDialogClose">
			<!-- 注意el-tab-pane直系父标签必须是el-tabs因此form需要加在外面 -->
				<el-form :model="editListInfo" :rules="editListInfoRules" ref="editListInfoRef" label-width="100px" label-position="top">
					<el-tabs tab-position="left" v-model="activeIndex">
						<!-- 基本信息 -->
						<el-tab-pane label="基本信息" name="0">
							 <el-form-item label="商品名称" prop="goods_name">
								<el-input v-model="editListInfo.goods_name"></el-input>
							</el-form-item>
							 <el-form-item label="商品价格" prop="goods_price">
								<el-input v-model.number="editListInfo.goods_price" type="number" step="0.1"></el-input>
							</el-form-item>
							 <el-form-item label="商品重量" prop="goods_weight">
								<el-input v-model.number="editListInfo.goods_weight" type="number" step="0.1"></el-input>
							</el-form-item>
							 <el-form-item label="商品数量" prop="goods_number" type="number">
								<el-input v-model.number="editListInfo.goods_number"></el-input>
							</el-form-item>
						</el-tab-pane>
						<!-- 动态参数 -->
						<el-tab-pane label="商品参数" name="1">
						<el-form-item :label="item.attr_name" v-for="(item,index) in manyTableData" :key="item.attr_id">
							<el-checkbox-group v-model="item.attr_value">
    						<el-checkbox :label="item2" v-for="(item2,index2) in item.attr_value" :key="item2.index2" border></el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						</el-tab-pane>
						<!-- 静态属性 -->
						<el-tab-pane label="商品属性" name="2">
							<el-form-item :label="item.attr_name" v-for="(item,index) in onlyTableData" :key="item.attr_id">
								<el-input v-model="item.attr_value"></el-input>
							</el-form-item>
						</el-tab-pane>
						<!-- 图片上传 -->
						<el-tab-pane label="商品图片" name="3">
							<!-- action为必选参数，上传到的后台API地址 -->
							<el-upload :action="upload"	:on-preview="handlePreview"	:on-remove="handleRemove"	list-type="picture" :headers="headerObj"  :file-list="fileList" :on-success="handleSuccess">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-tab-pane>
						<!-- 商品内容描述 -->
						<el-tab-pane label="商品内容" name="4">
							<!-- 引入第三方富文本编辑器插件 -->
						 <quill-editor v-model="editListInfo.goods_introduce" @blur="onEditorBlur"/>
						</el-tab-pane>
					</el-tabs>
				</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editInfo">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 图片预览区域 -->
		<el-dialog title="图片预览" :visible.sync="previewDialogVisible" width="50%" @close="previewDialogClose">
			<img :src="previewUrl" alt="" class="previewImg">
		</el-dialog>
	</div>
</template>

<script>
// 导入深拷贝的插件（官方提倡以下划线命名）
import _ from 'lodash'

export default {
	data(){
		return {
			// 查询参数的对象
			queryInfo:{
				query:'',
				pagenum: 1,
				pagesize: 5
			},
			// 商品列表信息
			goodsList:[],
			// 商品总条数
			total:0,
			// 控制编辑对话框的显示和隐藏
			editDialogVisible:false,
			// 存储编辑时的数据
			editListInfo:{},
			// 编辑商品信息的规则
			editListInfoRules:{
				goods_name:[
					{required: true,message: '请输入商品名称',trigger: 'blur'}
				],
				goods_price:[
					{required: true,message: '请输入商品价格',trigger: 'blur'}
				],
				goods_weight:[
					{required: true,message: '请输入商品重量',trigger: 'blur'}
				],
				goods_number:[
					{required: true,message: '请输入商品数量',trigger: 'blur'}
				],
				goods_cat:[
					{required: true,message: '请选择商品分类',trigger: 'blur'}
				]
			},
			// tab栏切换的index
			activeIndex:'',
			// 接收动态参数信息
			manyTableData:[],
			// 接收静态属性数据
			onlyTableData:[],
			// 图片上传后台地址
			upload:'http://127.0.0.1:8888/api/private/v1/upload',
			// 图片上传的请求头对象(注意element-ui内部upload不经过aixos请求，因此没有使用我们之前请求拦截加的请求头，此处要单独手动加)
			headerObj:{
				Authorization:window.sessionStorage.getItem('token')
			},
			// 控制预览图的显示和隐藏
			previewDialogVisible:false,
			// 预览图片的地址
			previewUrl:'',
			fileList:[],
			// 用来汇总编辑商品的信息
			editForm:{
			}

		}
	},
	created(){
		this.getGoodsList()
	},
	methods:{
		// 获取商品列表数据
		async getGoodsList(){
			const {data: res} = await this.$http.get('goods',{
				params:this.queryInfo
			})
			if(res.meta.status !== 200){
				return this.$message.error('商品信息获取失败')
			}
			this.goodsList = res.data.goods
			this.total = res.data.total
			// console.log(this.goodsList);
		},
		// 改变pagesize事件
		handleSizeChange(newSize){
			this.queryInfo.pagesize = newSize
			this.getGoodsList()
		},
		// 改变pagenum事件
		handleCurrentChange(newPage){
			this.queryInfo.pagenum = newPage
			this.getGoodsList()
		},
		// 点击添加商品，跳转到添加商品页面
		goAddPage(){
			this.$router.push('/goods/add')
		},
		// 点击删除触发事件
		async deleteList(id){
			// console.log(id);
			const confirmResult = await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
				}).catch(err => err)
			if(confirmResult !== 'confirm'){
				return this.$message('已取消删除')
			}
			// 点击确认发送删除请求
			const {data: res} = await this.$http.delete('goods/' + id)
			if(res.meta.status !== 200){
				return this.$message.error('商品删除失败')
			}
			this.$message.success('商品删除成功')
			this.getGoodsList()
		},
		// 点击编辑，弹出对话框事件
		async editListClick(id){
			this.editDialogVisible = true
			// 根据id获取数据
			const {data: res} = await this.$http.get('goods/' + id)
			if(res.meta.status !== 200){
				return this.$message.error('商品信息获取失败')
			}
			// (1)、处理动态参数和静态属性
			res.data.attrs.forEach(item => {
				if(item.attr_sel === 'many'){
					item.attr_value = item.attr_value.split(',')
					this.manyTableData.push(item)
				}else{
					this.onlyTableData.push(item)
				}
			})
			this.editListInfo = res.data
			// console.log(this.editListInfo);
			// console.log(this.manyTableData);
			// console.log(this.onlyTableData);
			// 此处编辑模板和新增商品类似，因此需要对部分数据处理
			// (2)、处理加载显示原先商品的图片
			if(this.editListInfo.pics.length !== 0){
				this.editListInfo.pics.forEach(item => {
				const picInfo = {
					name:item.pics_id,
					url:item.pics_mid_url
				}
				this.fileList.push(picInfo)
				// console.log(this.fileList);
				})
				
			}
		},
		// 处理图片预览图效果
		handlePreview(file,fileList){
			// console.log(file);
			// 提取预览图路径
			// console.log(this.fileList);
			// 此处改为file内的url，和添加商品处不一样
			this.previewUrl = file.url
			// 显示图片
			this.previewDialogVisible = true
		},
		// 处理移除图片的效果
		handleRemove(file, fileList){
			// 点击移除图片之后，需要把添加到addForm.pic的图片路径属性信息删除
			// 1、提取文件的图片路径
			const filePath = file.response.data.tmp_path
			// console.log(file);
			// 2、在addForm的pics中查找对应的索引号
			const i = this.editListInfo.pics.findIndex(item => {
				item.pic === filePath
			})
			// 3、删除对应的元素
			this.editListInfo.pics.splice(i,1)
			// console.log(this.addForm);
		},
		// 文件上传成功调用的事件
		handleSuccess(response, file, fileList){
			console.log(fileList);
			console.log(file);
			if(response.meta.status !== 200){
				return this.$message.error('图片上传失败')
			}
			const picInfo = {
				pic: response.data.tmp_path
			}
			// 把上传的图片信息追加到添加到addForm.pic中
			this.editListInfo.pics.push(picInfo)
			// console.log(this.addForm);
			// console.log(this.editListInfo);
		},
		// 关闭预览图对话框是清空数据
		previewDialogClose(){
			this.previewUrl = ''
		},
		// 富文本编辑器失去焦点触发
		onEditorBlur(quill){
			// 关于会携带p标签的问题等下解决
			// console.log(quill);
			// console.log(this.addForm);
		},
		// 监听编辑对话框关闭事件
		editDialogClose(){
			this.$refs.editListInfoRef.resetFields()
			this.manyTableData = []
			this.onlyTableData = []
		}
		,
		// 点击确定，完成信息提交
		editInfo(){
			// (1)、预校验
			this.$refs.editListInfoRef.validate(async valid => {
				if(!valid) {
					return this.$message('请按正确的格式输入各项内容')
				}
				// (2)、处理数据
				this.editForm = {
					goods_name:this.editListInfo.goods_name,
					goods_price:this.editListInfo.goods_price,
					goods_number:this.editListInfo.goods_number,
					goods_weight:this.editListInfo.goods_weight,
					goods_introduce:this.editListInfo.goods_introduce,
					attrs:[],
					pics:[]
				}
				// (3)、处理动静态参数(注意添加商品是用attr_vals，此处用attr_value)
				this.manyTableData.forEach(item => {
					const newInfo = {
						attr_id:item.attr_id,
						attr_value:item.attr_value.join(',')
					}
					this.editForm.attrs.push(newInfo)
				})
				// (4)、处理静态属性
				this.onlyTableData.forEach(item => {
					const newInfo = {
						attr_id:item.attr_id,
						attr_value:item.attr_value
					}
					this.editForm.attrs.push(newInfo)
				})
				// console.log(this.editForm);
				// (5)、处理图片路径
				this.editListInfo.pics.forEach(item => {
					if(item.pics_big){
						const newPath = {
							pic:item.pics_big
						}
						this.editForm.pics.push(newPath)
					}else if(item.pic){
						const newPath = {
							pic:item.pic
						}
						this.editForm.pics.push(newPath)
					}
				})
				// console.log(this.editForm);
				// (6)、发送网络请求
				// (由于api文档问题，没有要求传分类，但是没有分类就没法编辑成功，因此此处编辑暂时先这样，请知悉)
				const {data: res} = await this.$http.put('goods/' + this.goodsId,this.editForm)
				// console.log(res);
				if(res.meta.status !== 201) {
					return this.$message.error('商品信息修改失败')
				}
				this.$message.success('商品信息修改成功')
				this.editDialogVisible = false
				this.getGoodsList()
			})
		}
	},
	computed:{
		goodsId(){
			return this.editListInfo.goods_id
		}
	}
}
</script>

<style lang="less" scoped>
	.previewImg{
		width: 100%;
	}
	.quill-editor{
		height:400px ;
	}
	.quill-editor /deep/ .ql-container{
		height: 70% !important;
	}
</style>